<template>
  <Header :topMsg='topMsg' :flag='true'/>
  <PullRefresh 
    v-if="data.length"
    v-model="loading" 
    success-text="刷新成功" 
    @refresh="onRefresh"
  >
    <div 
      class="friendList"
      @click="goChat(item)"
      v-for="item in data" :key="item.id"
    >
      <div class="profile"><img :src="item.img" alt=""></div>
      
      <div class="top">
        <i>{{item.name}}</i>
        <span>{{item.time}}</span>
        <span class="news">{{item.msg}}</span>
      </div>
    </div>
  </PullRefresh>
  <TabBar/>
  <div class="hh"></div>
</template>

<script setup>
  import {reactive, ref,  onMounted} from 'vue'
  import { useRouter } from 'vue-router'
  import {PullRefresh} from 'vant'
  import { useStore } from 'vuex'
  import Header from '@/components/Header.vue'
  import TabBar from '../components/TabBar'

  const store = useStore()
  const loading = ref(false)
  const data = ref([])
  const router = useRouter()

  const topMsg = reactive({
    kwh: 'iconfont icon-dianliang- kwh',
    kwhtext: '81% 手机电量> ',
    rightIco: 'iconfont icon-jiahao1 jia'
  })
  
  onMounted( () => {
    if(store.state.friendData.length <= 0) {
      store.dispatch('getFriends')
    }
    data.value = store.state.friendData
    console.log(data.value)
  })

  const onRefresh = () => {
    setTimeout(()=>{
      loading.value = false
      store.dispatch('getFriends')
      data.value = store.state.friendData
    },1000)
  }
  
  const goChat = (item) => {
      router.push({
        name: 'chat',
        params:{...item}
      })
      console.log(router)
  }


</script>

<style scoped>
.friendList {
  display: flex;
  width: 355px;
  height: 50px;
  margin: 10px 10px 0 10px;
  /* background-color: aqua; */
}

.friendList .profile {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 50%;
  overflow: hidden;
}

.friendList .profile img {
  width: 100%;
  height: 100%;
}

.friendList .top {
  position: relative;
  display: flex;
  height: 40px;
  width: 283px;
  justify-content: space-between;
}

.friendList .top i {
  margin-top: 1px;
  font-size: 14px;
}

.friendList .top span {
  margin-top: 12px;
  font-size: 10px;
}

.friendList .top .news {
  position: absolute;
  top: 15px;
  left: 0;
  width: 200px;
  height: 20px;
}

.hh {
  width: 100%;
  height: 60px;
}
</style>